<template>
  <view class="page">
  
   <view
      class="shop-item bg-white height-100 margin-lr text-df flex justify-between align-center solid-bottom">
      <view class="_left">{{i18n['结算类型']}}</view>
      <view class="_right text-cut  text-cut  text-right" @click="openPicker('settlement')">
        <text v-if="!settlementVal.id" class="text-bf">{{i18n['请选择结算类型']}}</text>
        <text v-else>{{ settlementVal.name }}</text>
        <text class="cuIcon-right margin-left-sm"></text>
      </view>
    </view>
    <view class="shop-item bg-white height-100 margin-lr text-df flex justify-between align-center solid-bottom">
      <view class="_left">{{i18n['结算账户']}}</view>
      <view class="_right text-cut  text-cut  text-right"><input type="text"
          :placeholder="info.account_type != 3?i18n['请输入结算账户']:i18n['请输入银行卡号']" v-model="info.account_id"
          placeholder-class="placeholder" maxlength="20"/></view>
    </view>
   <block v-if="info.account_type != 3">
	   <view class="shop-item bg-white padding-tb margin-lr text-df flex flex-direction">
	     <view class="_left">{{i18n['收款二维码']}}</view>
	     <view class="_right text-right flex margin-top">
	       <image class="up-img" src="../../static/upload-img.png" mode="" v-if="!info.qrcode" @click="upLoadImg()"></image>
	       <view class="img-wrap" v-else>
	         <text class="cuIcon-roundclosefill text-666 text-lg close" @click="clearImg()"></text>
	         <image class="img" :src="qrcode" mode="aspectFit"></image>
	       </view>
	     </view>
	   </view>
      <view class="shop-item bg-white height-100  margin-lr text-df flex justify-between align-center solid-bottom">
        <view class="_left">{{i18n['真实姓名']}}</view>
        <view class="_right text-right"><input type="text" :placeholder="i18n['请输入真实姓名']" v-model="info.true_name"
            placeholder-class="placeholder" maxlength="6"/></view>
      </view>
      
    </block>
    <block v-if="info.account_type == 3">
      <view class="shop-item bg-white height-100 margin-lr text-df flex justify-between align-center solid-bottom">
        <view class="_left">{{i18n['结算开户名']}}</view>
        <view class="_right text-cut  text-cut  text-right">
          <input type="text" :placeholder="i18n['请输入银行卡开户名']" v-model="info.account_name"
            placeholder-class="placeholder" maxlength="20"/>
        </view>
      </view>
      <view class="shop-item bg-white height-100 margin-lr text-df flex justify-between align-center solid-bottom">
        <view class="_left">{{i18n['结算开户银行支行名称']}}</view>
        <view class="_right text-cut  text-cut  text-right">
          <input type="text" :placeholder="i18n['请输入结算开户银行支行名称']" v-model="info.bank_branch"
            placeholder-class="placeholder" maxlength="24"/>
        </view>
      </view>
      <view class="shop-item bg-white height-100 margin-lr text-df flex justify-between align-center solid-bottom">
        <view class="_left">{{i18n['结算开户银行所在地']}}</view>
        <view class="_right text-cut  text-cut  text-right">
          <input type="text" :placeholder="i18n['请输入结算开户银行所在地']" v-model="info.bank_address"
            placeholder-class="placeholder" />
        </view>
      </view>
    </block>
    <view class="btn-wrap flex justify-between align-center margin-tb-xl margin-lr">
      <view class="btn" @click="handlerPre">{{i18n['上一步']}}</view>
      <view class="btn active" @click="handlerNext">{{i18n['下一步']}}</view>
    </view>
    <!-- 结算类型 -->
    <w-picker :visible.sync="visible" mode="selector" :value="settlementVal.name" default-type="name"
      :default-props="defaultProps" :options="settlementList" @confirm="onConfirm($event, 'settlement')"
      @cancel="onCancel" ref="settlement" themeColor="#B82441"></w-picker>
  </view>
</template>

<script>
  // @see 引入验证，上传图片
  import {
    UploadImage,
    validate
  } from '@/common/utils/index';
  import wPicker from '../../components/w-picker/w-picker.vue';
  export default {
    components: {
      wPicker
    },
    data() {
      return {
        visible: false,
        settlementVal: {}, //结算
        defaultProps: {
          label: 'name',
          value: 'id'
        },
        settlementList: [],
        info: {
          account_type: '', //账户类型 1 微信 2 支付宝 3 银行卡
          account_id: '', //结算账户 微信UNIONID 支付宝账户 银行卡号
          account_name: '', //银行开户名
          bank_branch: '', //银行开户支行
          bank_address: '', //开户银行所在地
          qrcode: '', //收款二维码
          true_name: '' //真实姓名
        },
        qrcode: ''
      };
    },
    onLoad() {
      this.getAccountType();
    },
    methods: {
      /**
       * @description 上传收款二维码
       */
      upLoadImg() {
        uni.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['camera', 'album'], // 可以指定来源是相册还是相机，默认二者都有
          success: res => {
            console.log(res);
            let list = res.tempFilePaths;
            list.forEach((val, i) => {
              this.uploadUserImg(val);
            });
          }
        });
      },
      /**
       * @description 上传图片
       */
      uploadUserImg(blob) {
        // uni.showLoading();
        let _this = this;
        // 开始上传
        new UploadImage([blob], {
          complete: res => {
            console.log(res);
            if (res.length) {
              this.info.qrcode = res[0].id;
              this.qrcode = res[0].path;
            }
          }
        });
      },
      clearImg() {
        this.info.qrcode = '';
        this.qrcode = '';
      },
      getAccountType() {
        this.$api
          .post(global.apiUrls.account_type)
          .then(res => {
            console.log(res);
            if (res.data.code == 1) {
              let list = res.data.data;
              let account = [];
              for (let attr in list) {
                account.push({
                  id: attr,
                  name: list[attr]
                });
              }
              this.settlementList = account;
              this.settlementVal = account[0];
              this.info.account_type = account[0].id;
            } else {
              this.$message.info(res.data.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      },
      // 上一步
      handlerPre() {
        uni.navigateBack({
          delta: 1
        });
      },
      // 下一步
      handlerNext() {
        let info = this.info;
        let regAliyun = /^(?:1[2-9]\d{9}|[a-zA-Z\d._-]*\@[a-zA-Z\d.-]{1,10}\.[a-zA-Z\d]{1,20})$/;
        if (!info.account_type.trim()) return this.$message.info(this.i18n['请选择结算类型']);
        if (!info.account_id.trim()) return this.$message.info(this.i18n['请输入结算账户']);
        //   let regEmoji = /(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55]/g
        // if(!regEmoji.test(info.account_id)){
        // 	this.$message.info('结算账户不能输入表情');
        // 		return
        // 	}
        if (info.account_type != 3) {
          if (!info.qrcode) return this.$message.info(this.i18n['请上传收款二维码']);
          if (!info.true_name.trim()) return this.$message.info(this.i18n['请输入真实姓名']);
          // if(!regEmoji.test(info.true_name)){
          // 	this.$message.info('真实姓名不能输入表情');
          // 	return
          // }
        } else {
          if (!info.account_name.trim()) return this.$message.info(this.i18n['请输入银行开户名']);
          if (!info.bank_branch.trim()) return this.$message.info(this.i18n['请输入开户支行']);
          if (!info.bank_address.trim()) return this.$message.info(this.i18n['请输入银行所在地']);
        }
        let store_joinin_id = uni.getStorageSync('store_joinin_id') || 0;
        let store_user_id = uni.getStorageSync('store_user_id') || 0;
        this.$api
          .post(global.apiUrls.settlement_account, info, {
            header: {
              Storeid: store_joinin_id,
              Userid: store_user_id
            }
          })
          .then(res => {
            console.log(res);
            if (res.data.code == 1) {
              uni.navigateTo({
                url: '/pages/goods/shop/shop-info/index'
              });
            } else {
              this.$message.info(res.data.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      },
      // 打开弹窗
      openPicker(type) {
        this.$refs[type].show();
      },
      onCancel() {},
      onConfirm(res, type) {
        console.log(res, type);
        if (type == 'settlement') {
          this.settlementVal = res.obj;
          this.info.account_type = res.value;
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  page,body,.page{
    background-color: #FFFFFF;
    padding-bottom: 200rpx;
	min-height: 100vh;
  }


  .height-100 {
    height: 100rpx;
  }

  .placeholder {
    color: #bfbfbf;
    font-size: 28rpx;
  }

  .text-bf {
    color: #bfbfbf;
  }

  .shop-item {
    ._left {
      width: 300rpx;
    }

    ._right {
      width: calc(100% - 300rpx);

      .up-img {
        width: 150rpx;
        height: 150rpx;
      }

      .img-wrap {
        width: 150rpx;
        height: 150rpx;
        border: 1px dashed #eeeeee;
        position: relative;

        .close {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
          z-index: 99;
        }

        .img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .btn-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFFFFF;

    .btn {
      width: 300rpx;
      height: 88rpx;
      line-height: 86rpx;
      text-align: center;
      font-size: 28rpx;
      color: #333;
      background: #ffffff;
      color: $theme;
      border-radius: 44rpx;
      border: 1px solid $theme;

      &.active {
        background: $bgtheme;
        color: #ffffff;
      }
    }
  }
</style>
